<template>
  <div class="exhibition-container">
    <div @click="handleClick" class="header">
      <el-tag
        v-for="(item, index) in materials"
        :key="item.url"
        :data-url="item.url"
        :data-index="index"
        :type="resourceWatched[index] ? 'success' : 'info'"
        >{{ item.fileName }}</el-tag
      >
    </div>
    <iframe
      id="pdfFrame"
      :src="pdfSrc"
      frameborder="0"
      width="100%"
      height="100%"
    ></iframe>
  </div>
</template>

<script>
// let lastDOM = null;
// import PopGame from "@/components/PopGame";
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "PDF",
  components: {},
  data() {
    return {
      pdfSrc: "",
    };
  },
  methods: {
    ...mapMutations("studyAbout", ["FINISH_MATERIALS"]),
    handleClick(e) {
      const currentDOM = e.target;
      const { url, index } = currentDOM.dataset;
      // if (!url) return;
      // this.pdfSrc = url;
      // // this.resourceWatched[index] = true;
      // this.FINISH_MATERIALS(index * 1);
      window.open(
        "http://192.168.1.125:8012/onlinePreview?url=" + encodeURIComponent(url)
      );
    },
    // 检测PDF是否完全阅读
    // 检测PDF是否完全阅读
    checkPDF(dom, total, delay, callback) {
      dom.addEventListener("scroll", () => {});
      /**
       * 需求描述，要保证dom在上一次滚动后只能停留delay以内的时间，不然倒计时暂停
       * 当页面重新滚动倒计时继续，当倒计时归零，调用callback函数
       */
    },
    callback() {
      console.log("倒计时归零");
    },
  },
  computed: {
    ...mapState("studyAbout", ["materials"]),
    ...mapGetters("studyAbout", ["resourceWatched"]),
  },
  mounted() {
    // this.pdfSrc = decodeURI(this.$route.query.src);
    // this.materials = JSON.parse(localStorage.getItem("studyContent")).materials;
    if (this.materials.length > 0) {
      this.pdfSrc = this.materials[0].url;
      // this.resourceWatched = Array.from(this.materials).fill(false);
      // this.FINISH_MATERIALS(0);
    }
  },
  beforeDestroy() {
    // this.checkPDF();
  },
};
</script>
<style lang='less' scoped>
.exhibition-container {
  width: 100%;
  // height: 100%;
}
.exhibition-container .header {
  margin-bottom: 10px;
  .el-tag {
    margin-right: 5px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
}
.exhibition-container iframe {
  width: 90%;
  // height: calc(100% - 42px);
  height: 590px;
  /* margin: 0 auto; */
  margin-left: calc((100% - 80%) / 2);
}
.active {
  background-color: #ccc;
}
</style>